<template>
  <el-dialog v-model="dialogVisible" title="预览配置" width="50%" @close="handleClose">
    <SubmitForm
      v-if="dialogVisible"
      ref="submitFormRef"
      :schemas="computedSchema"
      :model="submitForm"
      label-width="100"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleCommit">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup name="PreviewConfigDialog">
import { ref, computed } from 'vue'
import { cloneDeep } from 'lodash'
import { ElMessage } from 'element-plus'
import { SubmitForm } from '@/components/SubmitForm'
const props = defineProps<{ formList: SubmitFormSchema[] }>()

const dialogVisible = ref(false)
const emit = defineEmits(['close'])
const computedSchema = computed(() => {
  return props.formList
})
const submitFormRef = ref<InstanceType<typeof SubmitForm>>()
const handleCommit = async () => {
  try {
    await submitFormRef.value?.validateForm()
    ElMessage.success('校验通过')
  } catch (error) {
    console.log(error)
  }
}

const handleClose = flag => {
  if (flag && typeof flag === 'boolean') {
    emit('close')
  }
  submitForm.value = {}
  submitFormRef.value?.resetFields()
  dialogVisible.value = false
}
const submitForm = ref({})
const titleType = ref('')
const handleOpen = (type, data = {}) => {
  titleType.value = type
  submitForm.value = cloneDeep(data)
  dialogVisible.value = true
}
defineExpose({ handleOpen })
</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
